import React, {useEffect, useState} from "react";
import {useBgContainerIndexStore, useMessageApiStore} from "@/store/BaseStore.ts";
import {getContainerInfo} from "@/api/PhotoApi.ts";
import {createStyles} from "antd-style";
import {Button, Modal} from "antd";
import PhotoContainerSelector from "@/components/public/PhotoContainerSelector.tsx";

const useStyle = createStyles(({css, token}) => {
    return {
        bgSelectorContent: css`
            padding: 0 !important;
            height: 70vh;
            display: flex;
            flex-direction: column;
            place-items: center;
            overflow: auto;

            .selectors {
                li {
                    padding: 8px 10px;
                    user-select: none;
                    font-size: 20px;

                    &:nth-child(2n) {
                        background-color: ${token.colorPrimaryBg};
                    }

                    &:nth-child(2n + 1) {
                        background-color: ${token.colorPrimaryBgHover};
                    }

                    &:hover {
                        cursor: pointer;
                        background-color: ${token.colorPrimaryActive};
                    }
                }
            }
        `,
    }
})

const IntroPageBgSelector: React.FC<{ content: string }> = ({content}) => {
    const {styles} = useStyle();
    const [containerInfoList, setContainerInfoList] = useState<[{ name: string; size: number; }] | []>([])

    const setBgContainerIndex = useBgContainerIndexStore(state => state.set);
    const messageApi = useMessageApiStore().messageApi;

    // 切换背景选择对话框
    const [showModal, setShowModal] = useState(false);

    /**
     * 切换背景图片容器
     * @param index 容器索引
     */
    const changeBgContainer = (index: number) => {
        setBgContainerIndex(index)
        setShowModal(false)
        messageApi.success("切换成功")
    }

    useEffect(() => {
        getContainerInfo().then((response) => {
            setContainerInfoList(response.data.data)
        })
    }, []);

    return (
        <>
            <Button onClick={() => setShowModal(true)}>{content}</Button>
            <PhotoContainerSelector props={{
                showModal,
                setShowModal,
                photoInfo: containerInfoList,
                setPhotoContainerIndex: changeBgContainer
            }}/>
            {/*<Modal title={null}*/}
            {/*       closeIcon={null}*/}
            {/*       open={showModal}*/}
            {/*       onCancel={() => {*/}
            {/*           setShowModal(false)*/}
            {/*       }}*/}
            {/*       footer={null}*/}
            {/*       keyboard={true}*/}
            {/*       classNames={{content: styles.bgSelectorContent}}*/}
            {/*>*/}
            {/*    <ul className="selectors">*/}
            {/*        {*/}
            {/*            containerInfoList.length > 0 ? containerInfoList.map((value, index) => {*/}
            {/*                return (*/}
            {/*                    <li key={index} onClick={() => {*/}
            {/*                        changeBgContainer(index)*/}
            {/*                        // @ts-ignore*/}
            {/*                    }}>{value.name}</li>*/}
            {/*                )*/}
            {/*            }) : <li key={0}>empty</li>*/}
            {/*        }*/}
            {/*    </ul>*/}
            {/*</Modal>*/}
        </>
    )
}

export default IntroPageBgSelector;
